<template>
  <el-dialog v-model="addOrEditVisible" title="系统文件" :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <el-row>
        <el-col :span="24">
          <el-form-item label="文件名称" prop="fileName">
            <form-up-load-image @uploadImageCallback="uploadImageCallback" :image-url="ruleForm.url"></form-up-load-image>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
     <span class="dialog-footer">
       <el-button @click="closeEditDialog">关闭</el-button>
       <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
     </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus"
import router from "@/router";
import {File} from '@/apis/model/system/FileModel';
import {insertFile, updateFile} from '@/apis/http/system/FileHttp';
import type {UploadProps} from 'element-plus'
import FormUpLoadImage from "@/components/form/FormUpLoadImage.vue";

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: File,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

/**
 * 上传图片回调
 */
const uploadImageCallback = (e: File) => {
  props.ruleForm.createName = e.createName;
  props.ruleForm.createTime = e.createTime;
  props.ruleForm.createUser = e.createUser;
  props.ruleForm.fileName = e.fileName;
  props.ruleForm.filePath = e.filePath;
  props.ruleForm.url = e.url;
  props.ruleForm.fileSize = e.fileSize;
  props.ruleForm.fileType = e.fileType;
  props.ruleForm.storageConfigId = e.storageConfigId;
}

const submitForm = async (formEl: FormInstance | undefined) => {
  debugger
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertFile(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateFile(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
